<!--
 * @description  : 选择零售户
 * @descriptionDetail: 选择零售户
 * @copyright    : 浙江烟草
 * @author       : lcm
 * @create       : 2022-09-27 09:58:58
-->

<template>
	<view class="page">
		<!-- #ifdef H5-ONLY -->
		<theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999">
			<view class="nav-right-icon">
				<view @tap="handlerSure">
					确定
				</view>
			</view>
		</theme-navbar>
		<!-- #endif -->
		<!-- #ifdef H5-WECHAT || H5-EMP -->
		 <fab-button :content="fContent" @fabtrigger="fabtrigger" />
		<!-- #endif -->
		<view class="sticky-header">
			<u-search shape="round" :clearabled="true" :showAction="true" actionText="确定" :animation="true" v-model="keyword" @custom="handlerSearch"></u-search>
		</view>
		<me-table :i="0" :top="70" :index="0" :load-data="loadData" ref="mescrollItem0">
			<template #default="d">
				<view class="card">
					<view style="display: flex;align-items: center;" @tap="handlerSelectItem(d.data)">
						<view style="flex: 1;">
							<client-item :key="d.data.licNo" :client="d.data"></client-item>
						</view>
						<view style="text-align:right; width: 40px;">
							<u-icon name="checkbox-mark" color="#2979ff" size="38" style="margin-right: 10px;" v-if="selectedUids.includes(d.data.retailerUuid)"></u-icon>
						</view>
					</view>
				</view>
			</template>
		</me-table>
	</view>
</template>

<script>
	import MeTable from '@/components/me-table.vue';
	import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
	import fieldAuditService from "@/service/internal/fieldAudit.service.js";
	import ClientItem from './components/client-item.vue';
	import fabButton from '@/components/uni-fab.vue';

	export default {
		components: {
			MeTable,
			ClientItem,
			fabButton
		},
		mixins: [MescrollMoreMixin, ],
		data() {
			return {
				keyword: "",
				isSingle: false, // 是否单选，默认多选
				selectedUids: [], // 选中项的ids
				selectedItems: [], // 选中项
				fContent: [{
					iconPath: require('@/static/confirm.png'),
					selectedIconPath: require('@/static/confirm.png'),
					text: '确定',
					active: false,
				}],
			};
		},
		onLoad(option) {
			this.isSingle = option.isSingle;
		},
		methods: {
			setRightBtns() {
				// 设置右侧标题
				// #ifdef H5-DINGDING
				console.log("设置零售右侧按钮");
				// 先放开右侧标题
				this.$deviceApi.setRight("确定", () => {
					// 添加日计划操作
					this.handlerSure();
					this.setRightBtns();
				}, true, true);
				// #endif
			},
			fabtrigger(btn) {
				if (btn.index == 0) {
					this.handlerSure();
				}
			},
			handlerSearch() {
				this.$refs['mescrollItem0'].refresh();
			},
			// 选中
			handlerSelectItem(item) {
				if (this.isSingle) {
					this.selectedUids = [item.retailerUuid, ];
					this.selectedItems = [item, ];
					return;
				}
				if (this.selectedUids.includes(item.retailerUuid)) {
					this.selectedItems = this.selectedItems.filter(it => it.retailerUuid != item.retailerUuid);
				} else {
					this.selectedItems.push(item);
				}
				this.selectedUids = [];
				this.selectedItems.forEach(it => this.selectedUids.push(it.retailerUuid));
			},
			// 在线案件查询数据
			loadData(page) {
				// 调用后台接口查询数据：分页参数page.size, page.num
				return fieldAuditService.listRlic(page.num, page.size, {
					search: this.keyword,
				});
			},
			// 确定
			handlerSure() {
				this.backPrev({
					paramKey: this.$rp.check.CHECK_CLIENT,
					param: this.selectedItems,
				});
				this.selectedUids = this.selectedItems = [];
			},
		},
	};
</script>

<style lang="scss" scoped>
	.sticky-header {
		background-color: #fff;
		position: fixed;
		/* #ifdef H5-DINGDING  */
		top: 0px;
		/* #endif */
		/* #ifndef H5-DINGDING  */
		top: 44px;
		/* #endif */
		width: 100%;
		height: 40px;
		z-index: 999;
	}

	.page {
		padding: 0px;
		background-color: #f1f1f1;

		.card {
			background-color: #FFF;
			margin: 10px;
			border-radius: 5px;
			padding: 5px 0px;
		}
	}
</style>
